import React, { useEffect, useState } from "react";
import { Space, Table, Tag, Button, Form, Input, Col, Row, Select } from "antd";
import styles from "./index.module.scss";

export default function MyTable(props) {
  // props
  /**
   * 1、props的固定属性
   *  1)columns 数组 表头
   *  2）data 数据
   *  3）查询条件searchList
   */
  const { columns = [], data = [], searchList = [] } = props;
  const [searchDate, setsearchDate] = useState({});

  // 处理查询条件，并返回给父组件
  const handleFilter = () => {
    // console.log(searchDate);
    const data = {};
    let keys = Object.keys(searchDate);
    keys.forEach((key) => {
      if (searchDate[key]) {
        //过滤掉空白条件
        data[key] = searchDate[key];
      }
    });
    props.handleFilter(data);
  };
  // 重置查询条件，并返回给父组件
  const handleClier = () => {
    let keys = Object.keys(searchDate);
    keys.forEach((key) => {
      searchDate[key] = undefined;
    });
    form.setFieldsValue(searchDate);
    setsearchDate(searchDate);
    handleFilter();
  };

  //   当搜索数据发生改变是调用，双向数据绑定
  const inputChange = (e, data, index) => {
    // data[data["key"]] = e.target.value; //这样第一次可以获取数据，再次点击搜索会丢失数据
    searchDate[data["key"]] = e.target.value;
    setsearchDate(searchDate);
  };
  const selectChange = (value, data, index) => {
    searchDate[data["key"]] = value;
    setsearchDate(searchDate);
  };
  //将查询条件渲染到页面上
  const handleShear = (data, index) => {
    return (
      <Col span={5} key={data.key}>
        <Form.Item label={data.text} name={data.key}>
          {searchType(data, index)}
        </Form.Item>
      </Col>
    );
  };
  //   判断当前查询条件类型，并返回对应组件
  const searchType = (data, index) => {
    if (data.type === "input") {
      return (
        <Input
          value={searchDate[data["key"]]}
          onChange={(e) => {
            inputChange(e, data, index);
          }}
          style={{
            textAlign: "left",
            height: "36px",
          }}
          placeholder={data["placeholder"]}
        />
      );
    } else if (data.type === "select") {
      return (
        <Select
          value={searchDate[data["key"]]}
          onChange={(value) => {
            selectChange(value, data, index);
          }}
          options={data.options}
          style={{
            textAlign: "left",
            height: "36px",
          }}
          placeholder={data["placeholder"]}
        />
      );
    }
  };

  // 直接修改searchDate页面上的input框等不会跟着改变，主要是重置时，给Form绑定一个form，重置时调用form.setFieldsValue方法。
  const [form] = Form.useForm();

  return (
    <div className={styles.myTable}>
      {/* 搜索条件区域 */}
      <Form
        form={form}
        labelCol={{ flex: "110px" }}
        labelAlign="right"
        labelWrap
        colon={false}
        style={{}}
        className={styles.marB24}
      >
        <Row>
          {searchList.map((item, index) => {
            return handleShear(item, index);
          })}
          <Col span={4} style={{ textAlign: "center" }}>
            <Button type="primary" onClick={handleFilter}>
              搜索
            </Button>
            <Button
              type="primary"
              onClick={handleClier}
              style={{ marginLeft: "10px" }}
            >
              重置
            </Button>
          </Col>
        </Row>
      </Form>
      {/* rowSelection={rowSelection} */}
      <Table columns={columns} dataSource={data} />
    </div>
  );
}
